<template>
  <div class="diet-manage">
    <a-card title="饮食管理" :bordered="false">
      <a-row :gutter="24">
        <a-col :span="6">
          <a-card hoverable @click="goToSection('foods')">
            <template #cover>
              <div class="card-icon">
                <shopping-outlined />
              </div>
            </template>
            <a-card-meta title="食物管理" description="添加、编辑和删除食物" />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card hoverable @click="goToSection('categories')">
            <template #cover>
              <div class="card-icon">
                <appstore-outlined />
              </div>
            </template>
            <a-card-meta title="食物分类" description="管理食物分类" />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card hoverable @click="goToSection('recipes')">
            <template #cover>
              <div class="card-icon">
                <book-outlined />
              </div>
            </template>
            <a-card-meta title="食谱管理" description="添加、编辑和删除食谱" />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card hoverable @click="goToSection('records')">
            <template #cover>
              <div class="card-icon">
                <database-outlined />
              </div>
            </template>
            <a-card-meta title="饮食记录" description="查看用户饮食记录" />
          </a-card>
        </a-col>
      </a-row>

      <a-divider />

      <h3>饮食管理系统概览</h3>
      <a-row :gutter="24" style="margin-top: 20px">
        <a-col :span="8">
          <a-statistic title="食物数量" :value="stats.foodCount" style="margin-right: 50px">
            <template #prefix>
              <pie-chart-outlined />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="8">
          <a-statistic title="食谱数量" :value="stats.recipeCount" style="margin-right: 50px">
            <template #prefix>
              <book-outlined />
            </template>
          </a-statistic>
        </a-col>
        <a-col :span="8">
          <a-statistic title="今日饮食记录数" :value="stats.todayRecordCount">
            <template #prefix>
              <calendar-outlined />
            </template>
          </a-statistic>
        </a-col>
      </a-row>

      <a-divider />

      <h3>最近添加的食物</h3>
      <a-table :columns="foodColumns" :data-source="recentFoods" :pagination="false" :loading="loading">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-button type="link" @click="goToFoodDetail(record.id)">查看</a-button>
          </template>
          <template v-if="column.key === 'suitable'">
            <a-tag :color="record.suitable === 1 ? 'green' : 'red'">
              {{ record.suitable === 1 ? '适合' : '不适合' }}
            </a-tag>
          </template>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { 
  ShoppingOutlined, 
  AppstoreOutlined, 
  BookOutlined, 
  DatabaseOutlined,
  PieChartOutlined,
  CalendarOutlined
} from '@ant-design/icons-vue';
import axios from 'axios';

export default defineComponent({
  components: {
    ShoppingOutlined,
    AppstoreOutlined,
    BookOutlined,
    DatabaseOutlined,
    PieChartOutlined,
    CalendarOutlined
  },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const stats = ref({
      foodCount: 0,
      recipeCount: 0,
      todayRecordCount: 0
    });
    const recentFoods = ref([]);

    const foodColumns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id'
      },
      {
        title: '名称',
        dataIndex: 'name',
        key: 'name'
      },
      {
        title: '分类',
        dataIndex: 'categoryName',
        key: 'categoryName'
      },
      {
        title: '热量(kcal)',
        dataIndex: 'calories',
        key: 'calories'
      },
      {
        title: '碳水(g)',
        dataIndex: 'carbs',
        key: 'carbs'
      },
      {
        title: '适合糖尿病',
        dataIndex: 'suitable',
        key: 'suitable'
      },
      {
        title: '操作',
        key: 'action'
      }
    ];

    // 获取统计数据
    const fetchStats = async () => {
      try {
        loading.value = true;
        const response = await axios.get('/admin/diet/dashboard');
        if (response.data.code === 0) {
          stats.value = response.data.data;
        }
      } catch (error) {
        console.error('获取统计数据失败', error);
      } finally {
        loading.value = false;
      }
    };

    // 获取最近添加的食物
    const fetchRecentFoods = async () => {
      try {
        loading.value = true;
        const response = await axios.get('/admin/diet/foods', {
          params: {
            page: 1,
            pageSize: 5
          }
        });
        if (response.data.code === 0) {
          recentFoods.value = response.data.data.list || [];
        }
      } catch (error) {
        console.error('获取最近添加的食物失败', error);
        // 使用模拟数据作为后备
        recentFoods.value = [
          {
            id: 1,
            name: '煮鸡蛋',
            categoryName: '蛋白质类',
            calories: 72,
            carbs: 0.6,
            suitable: 1
          },
          {
            id: 2,
            name: '牛奶',
            categoryName: '奶制品',
            calories: 42,
            carbs: 5,
            suitable: 1
          }
        ];
      } finally {
        loading.value = false;
      }
    };

    const goToSection = (section) => {
      router.push(`/diet/${section}`);
    };

    const goToFoodDetail = (id) => {
      router.push(`/diet/foods?id=${id}`);
    };

    onMounted(() => {
      fetchStats();
      fetchRecentFoods();
    });

    return {
      loading,
      stats,
      recentFoods,
      foodColumns,
      goToSection,
      goToFoodDetail
    };
  }
});
</script>

<style scoped>
.diet-manage {
  width: 100%;
}

.card-icon {
  padding: 30px 0;
  text-align: center;
  font-size: 48px;
  color: #1890ff;
  background-color: #e6f7ff;
}

h3 {
  font-size: 18px;
  margin-bottom: 20px;
}
</style> 